<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<title>账户设置</title>
<link rel="icon" type="image/x-icon">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<body>
<!--样式资源-->
<div th:insert="base/style :: style"></div>
<!--样式资源-->

<!--nav导航-->
<div th:insert="base/nav :: nav"></div>
<!--nav导航-->
<!--hidden-->
<div th:insert="base/hidden :: hidden"></div>
<!--hidden-->
<div class="content"  style="padding-bottom: 30px">
    <div class="row" id="person" >
        <div class="col-md-2">
            <ul class="nav nav-pills nav-tabs nav-stacked" style="margin-left: 15px">
                <li role="presentation" class="active"><a href="#user_icon" aria-controls="user_icon" role="tab" data-toggle="tab"><i class="icon-picture"></i>&nbsp;头像更换</a></li>
                <li role="presentation"><a href="#nickname" aria-controls="nickname" role="tab" data-toggle="tab"><i class="icon-edit"></i>&nbsp;昵称修改</a></li>
                <li role="presentation"><a href="#password" aria-controls="passwd" role="tab" data-toggle="tab"><i class="icon-key"></i>&nbsp;密码修改</a></li>
            </ul>
        </div>
        <div class="col-md-8">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="user_icon">
                    <fieldset class="layui-elem-field">
                        <legend>个人设置 - 头像更换</legend>
                        <div class="layui-field-box">
                            <div class="layui-upload">
                                <div class="layui-upload-list" id="icon">
                                    <p id="demoText"></p>
                                </div>
                                <button type="button" class="btn btn-default btn-xs" id="change" style="margin-left: 2%">点击更换</button>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div role="tabpanel" class="tab-pane" id="nickname">
                    <div class="row">
                        <div class="col-md-12">
                            <fieldset class="layui-elem-field">
                                <legend>个人设置 - 昵称修改</legend>
                                <div class="layui-field-box">
                                    <form class="form-inline">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <div class="input-group-addon">新昵称</div>
                                                <input type="text" class="form-control" placeholder="请输入新的昵称" id="input_nickname" value="">
                                                <div class="input-group-addon"><button type="reset" style="border: none;background: none">清空</button></div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary" onclick="updateUserNickname()">确认修改</button>
                                    </form>
                                </div>
                            </fieldset>

                        </div>
                    </div>

                </div>
                <div role="tabpanel" class="tab-pane" id="password">
                    <fieldset class="layui-elem-field">
                        <legend>个人设置 - 密码修改</legend>
                        <div class="layui-field-box">
                            <form class="form-inline" autocomplete="off">
                                <div class="row">
                                    <div class="col-md-12">  <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon" style="font-size: 10px">新的密码</div>
                                            <input type="password" id="password_1" onchange='if($("#password_1").val() !==""){$("#info_1").html("<i class=\"icon-ok-sign\" style=\"color: green\"></i>")}else {$("#info_1").html("<i class=\"icon-remove-sign\" style=\"color: red\"></i>")}' class="form-control"  placeholder="请输入新密码">
                                            <div class="input-group-addon"><span id="info_1"><i class="icon-remove-sign" ></i></span></div>
                                        </div>
                                    </div></div>
                                </div>
                                <div class="row" style="margin-top: 5px;">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <div class="input-group-addon" style="font-size: 10px">确认密码</div>
                                                <input type="password" id="password_2" onchange='if($("#password_1").val() === $("#password_2").val()){$("#info_2").html("<i class=\"icon-ok-sign\" style=\"color: green\"></i>")}else {$("#info_2").html("<i class=\"icon-remove-sign\" style=\"color: red\" title=\"密码不一致\"></i>")}' class="form-control"  placeholder="再次输入密码">
                                                <div class="input-group-addon"><span id="info_2"><i class="icon-remove-sign" ></i></span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 5px;">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <button type="reset" class="btn btn-danger btn-xs" onclick='$("#info_1").html("<i class=\"icon-remove-sign\"></i>");$("#info_2").html( "<i class=\"icon-remove-sign\"></i>");'>清空</button>
                                                <button type="button" class="btn btn-primary btn-xs" style="margin-left: 5px" onclick="updateUserPassword()">确认修改</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </fieldset>
                </div>

            </div>
        </div>
    </div>
</div>

<!--页脚-->
<div th:insert="base/footer :: footer"></div>
<!--页脚-->


<script>

    /**
     * 展示用户信息
     */
    function showUserInfo() {
        let user= get_user_info(UID);
        $("#icon").html('<img class="layui-upload-img img-circle" id="up_icon" width="100px" height="100px" src="'+user.data.icon+'" name="file">');
        $("#input_nickname").attr("value",user.data.nickname);
    }
    showUserInfo();

    /**
     * 更新用户昵称
     */
    function updateUserNickname() {
        layui.use('layer', function() {
            let index = layer.load(2);
            let obj = update_nickname('?nickname='+$("#input_nickname").val()+'&id='+UID);
            if(obj.data !== 0){
                layer.close(index);
                layer.msg("更新成功！刷新页面即可");
            }else {
                layer.close(index);
                layer.msg("操作异常!");
            }
        });
    }

    /**
     * 更新用户密码
     */
    function updateUserPassword() {
        layui.use('layer', function() {
            let index = layer.load(2);
            let obj = update_password('?passwd='+$('#password_1').val()+'&id='+UID);
            if(obj.data !== 0){
                layer.close(index);
                layer.msg("更新成功！即将重新登陆");
                setTimeout("showLogin()",1000);
            }else {
                layer.close(index);
                layer.msg("操作异常!");
            }
        });
    }


    /**
     * 更新头像
     */
    layui.use('upload', function() {
        let $ = layui.jquery
            , upload = layui.upload;
        //普通图片上传
        let uploadInst = upload.render({
            elem: '#change'
            , url: UPLOAD_ICON
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#up_icon').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                let index = null;
                index = layer.load(2);
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                let obj = update_icon('?icon='+res.data+'&id='+UID);
                if(obj.data){
                    layer.close(index);
                    layer.msg("更新成功！")
                }else {
                    layer.close(index);
                    layer.msg("操作异常！")
                }
                // 上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                let demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    })
</script>
